<template>
  <div class="container containermain bg-white">
    <div class="row header">
      <header class="col">最新动态</header>
    </div>
    <hr />
    <div class="row">
      <div class="col">
        <ul class="list-group list-group-flush">
          <router-link v-for="(v, i) in getarticle" :key="i" :to="{ name: '动态详情', params: { ID: v.ID } }" custom
            v-slot="{ navigate }">
            <li @click="navigate" class="text-x list-group-item d-flex justify-content-between align-items-center">
              <span v-text="v.name"></span>
              <span class="time">
                {{ toLocaleDateString(v.createdAt) }}

              </span>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="getarticlecount" @current-change="change" layout="prev, pager, next"
          :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { mapGetters, useStore } from "vuex";
import { compose, debounce } from "underscore";
import { toLocaleDateString } from "../../../util/time";
import { computed, onMounted, ref, watch } from "vue";
import { Storekey } from "../../../interface";
import { useRoute, useRouter } from "vue-router";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
const store = useStore(Storekey)
const getarticle = computed(() => {
  return store.state.article?.rows || []
})

const getarticlecount = computed(() => {
  return store.state.article?.count || 0
})

const router = useRouter()

const route = useRoute()

const order = computed(() => {
  return String(route.query.order || 'ID')
})
const offset = computed(() => {
  return Number(route.query.offset || 20)
})
const limit = computed(() => {
  return Number(route.query.limit)
})

function change(r: number) {
  router.push({
    name: '动态',
    query: {
      limit: limit.value,
      order: order.value,
      offset: (r - 1) * limit.value
    }
  })
}

const debouncet1 = ref<Function>()

onMounted(() => {
  debouncet1.value = debouncet();
  start()
})

function start() {
  debouncet1.value ? debouncet1.value() : ''
}

watch(() => route.query, () => {
  start()
})


function ydl(v: Studycodemodel.Iarticle) {
  return Math.floor(Number(v.readnumber) * Number(v.readnumberride));
}

function debouncet() {
  return debounce(() => {
    store.dispatch("actionarticle", {
      _order: order.value,
      _offset: offset.value,
      _limit: limit.value,
    });
  }, 300);
}

</script>


<style scoped>
.text-x {
  cursor: pointer;
  font-size: 15px;
}

.list-group-item {
  border: none;
}

.list-group-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.list-group-flush {
  font-size: 15px;
}

.header {
  padding: 20px 17px;
  font-size: 22px;
  line-height: 28px;
}

.time {
  font-size: 13px;
  color: rgba(50, 50, 93, 0.352941176470588);
}

.containermain {
  margin-bottom: 20px;
  padding: 20px;
}
</style>
